<!-- subpkg_consult/order_list/index.vue -->
<script lang="ts" setup>
import { ref } from 'vue'
import customTab from '@/components/custom-tab/custom-tab.vue'

// 订单列表组件
import orderList from './components/order-list.vue'

// 标签索引值
const tabIndex = ref(0)
// 标签页数据
const orderTabs = ref([
  { label: '问医生', rendered: true },
  { label: '极速问诊', rendered: false },
  { label: '开药问诊', rendered: false },
])

const changeIndex = (index: number) => {
  console.log(index)
  tabIndex.value = index
  // 只要点击到对应的 tab，就会渲染对应的组件
  orderTabs.value[index].rendered = true
}

// const feedTabs = ref([
//     { label: '全部', rendered: true },
//     { label: '待支付', rendered: false },
//     { label: '待发货', rendered: false },
//     { label: '待收货', rendered: false },
//     { label: '已完成', rendered: false },
//   ])
</script>

<template>
  <view class="consult-page">
    <view class="consult-status-tabs">
      <!-- 顶部的 tab -->
      <custom-tab :data="orderTabs"  @change="changeIndex"></custom-tab>
    </view>

    <!-- 订单列表 -->
    <view v-for="(item, index) in orderTabs" :key="index" v-show="tabIndex == index">
      <!-- 需要渲染，才渲染，只有第一次会加载数据 
        type 的值 和 比索引大1 直接累加 并传入即可 
      -->
      <order-list v-if="item.rendered" :type="index + 1" />
    </view>
  </view>

  
</template>

<style lang="scss">
  // @import './index.scss';
</style>